import React, { Component } from "react";
import { TabBar } from "antd-mobile";
// import { UserOutlined } from "@ant-design/icons";
import { withRouter } from "react-router-dom";
import "../Tabar/fonts/iconfont.css";
import styles from "./style.less";
const tabItems = [
  {
    title: "告警",
    icon: "icon-set",
    path: "/IpadLineinspector",
  },
  {
    title: "用户",
    icon: "icon-map",
    path: "/IpadChangPassword",
  },
];
class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: this.props.location.pathname, //选中后的展示图片
      hidden: false, //是否隐藏
      fullScreen: false,
    };
  }
  componentDidUpdate(prevProps) {
    // prevProps 上一次的props，此处也就是上一次的路由信息
    // this.props 当前最新的props，此处也就是最新的路由信息
    // 注意：在该钩子函数中更新状态时，一定要在 条件判断 中进行，否则会造成递归更新的问题
    if (prevProps.location.pathname !== this.props.location.pathname) {
      // 此时，就说明路由发生切换了
      this.setState({
        selectedTab: this.props.location.pathname,
      });
    }
  }
  // 渲染 TabBar.Item
  renderTabBarItem() {
    return tabItems.map((item) => (
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`} />}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        selected={this.state.selectedTab === item.path} //是否选中
        onPress={() =>
          //bar 点击触发，需要自己改变组件 state & selecte={true}
          // this.props.history.push({
          //   pathname: item.pathname,
          //   query: { flag: true },
          // })
          {
            this.setState({
              selectedTab: item.path,
            });
            this.props.history.push(item.path);
          }
        }
      />
    ));
  }

  render() {
    return (
      <div className={styles.taber_style}>
        <TabBar
          tintColor="	#191970" //	选中的字体颜色
          noRenderContent={false} //	不渲染内容部分
          barTintColor="white" //	tabbar 背景色
          tabBarPosition="bottom"
        >
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    );
  }
}
export default withRouter(index);
